import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';
import HttpUtils from '../../../utils/HttpUtils';
import HttpUrls from '../../../utils/HttpUrls';
import Constant from '../../../utils/Constant'//全局变量

export default class LogisticsBox extends Component {

    constructor(props) {
        super(props);
        this.state = {
            totalCost: 0,
            shippingUserCityName: '', //发货人市
            deliveryConsigneeCityName: '', //收货人市

        }
    }

    componentDidMount() {
        let param = {
            buyerMerchantId: Constant.userInfo.merchantId,
            sellerMerchantId: this.props.sellerMerchantId,
            
        }
        HttpUtils.getRequest(HttpUrls.getRoutePriceByMerchantId, param)
            .then((result) => {
                if (result.code == 0) {
                    let data = result.data
                    this.setState({
                        totalCost: data.totalCost,
                        shippingUserCityName: data.shippingUserCityName,
                        deliveryConsigneeCityName: data.deliveryConsigneeCityName
                    })
                }
            })
            .catch((error) => {

            });
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={styles.itemBox}
                    onPress={() => {
                        let item = {
                            title: '预估运费',
                            content: '当前预估运费是基于卖家默认门店地址和本店默认门店地址，享受上门提车和送车上门服务的物流运费参考。以实际订单物流页的预估运费为准。'
                        }
                        if (this.props.showModal) {
                            this.props.showModal(item)
                        }
                    }}
                >
                    <Text style={styles.itemTitleText}>预估运费</Text>
                    <View style={styles.rightitemBox}>
                        <Text style={styles.priceText}>{this.state.totalCost ? (this.state.totalCost/100).toFixed(2) + '元':''}</Text>
                        <Image style={styles.arrowImg} source={require('source/image/comm/arrow_gray_icon.png')} />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.itemBox}
                    onPress={() => {
                        let item = {
                            title: '收发地',
                            content: '收发地为卖家默认门店地址所在地和当前账户所在门店默认地址。实际地址以订单提交地址为准。'
                        }
                        if (this.props.showModal) {
                            this.props.showModal(item)
                        }
                    }}
                >
                    <Text style={styles.itemTitleText}>收发地</Text>
                    <View style={styles.rightitemBox}>
                        <Text style={styles.addressText}>{this.state.shippingUserCityName ? this.state.shippingUserCityName + ' > ' + this.state.deliveryConsigneeCityName:''}</Text>
                        <Image style={styles.arrowImg} source={require('source/image/comm/arrow_gray_icon.png')} />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.itemBox}
                    onPress={() => {
                        let item = {
                            title: '服务',
                            content: '当前订单支持物流上门提车和送车上门服务。'
                        }
                        if (this.props.showModal) {
                            this.props.showModal(item)
                        }
                    }}
                >
                    <Text style={styles.itemTitleText}>服务</Text>
                    <View style={styles.rightitemBox}>
                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
                            <View style={styles.serviceBox}>
                                <Text style={styles.serviceText}>上门提车</Text>
                            </View>
                            <View style={styles.serviceBox}>
                                <Text style={styles.serviceText}>送车上门</Text>
                            </View>
                        </View>
                        <Image style={styles.arrowImg} source={require('source/image/comm/arrow_gray_icon.png')} />
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 8,
        marginTop: 10,
        flexDirection: 'column',
        backgroundColor: '#fff',
        borderRadius: 6,
    },
    itemBox: {
        width: '100%',
        height: 46,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
    },
    itemTitleText: {
        width: 110,
        fontSize: 14,
        color: '#999'
    },
    rightitemBox: {
        flex: 1,
        height: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    priceText: {
        fontSize: 14,
        color: '#FF7B00',
        fontWeight: '500'
    },
    addressText: {
        fontSize: 14,
        color: '#222222',
    },
    arrowImg: {
        width: 16,
        height: 16
    },
    serviceBox: {
        width: 64,
        height: 24,
        borderRadius: 3,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#FF7B00',
        marginRight: 6,
    },
    serviceText: {
        fontSize: 12,
        color: '#FF7B00',
    }


})